<template>
  <div class="count-body" :style="bodyStyle">
    <div class="count-left">
      <span class="count-left-span">{{ entity.label }}</span>
      <div
        class="count-left-radius"
        :style="{ backgroundColor: entity.titleColor }"
      >
        <span
          class="count-left-radius-span"
          :style="{ backgroundColor: entity.titleColor }"
        />
      </div>
    </div>
    <div class="count-right" v-html="html" />
  </div>
</template>

<script>
import {
  queryAnalysis,
  queryGuestAnalysis
} from '@/api/portal/manager/analysis';
import { getToken } from '@/utils/auth';
export default {
  name: 'ServerEntityCount',
  props: {
    params: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      entity: {},
      codes: [],
      html: '',
      bodyStyle: {}
    };
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    params: {
      handler(newName, oldName) {
        this.entity = newName;
        if (undefined !== newName.params && newName.params !== null) {
          this.codes = newName.params;
        }
        this.html = newName.show;
        this.initEntity();
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    themes: {
      handler(val, oldVal) {
        this.$nextTick(() => {
          console.log(val);
          // this.bodyStyle.borderRadius = val.bkdx;
          this.bodyStyle.background = val.columnGroundColor;
          this.bodyStyle.color = val.fontColor;
          this.bodyStyle = Object.assign({}, this.bodyStyle);
        });
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initEntity() {
      if (getToken()) {
        queryAnalysis({ id: this.entity.sjly.id }).then(res => {
          const { data } = res;
          if (this.codes !== null && this.codes.length > 0) {
            this.codes.forEach(item => {
              if (
                undefined !== data &&
                data !== null &&
                undefined !== data.data &&
                data.data !== null
              ) {
                this.html = this.html.replace(
                  new RegExp(
                    '\\$\\{([\\s]*?)(' + item.label + '{1})([\\s]*?)([^}])*\\}'
                  ),
                  data.data[0][item.code]
                );
              } else {
                this.html = this.html.replace(
                  new RegExp(
                    '\\$\\{([\\s]*?)(' + item.label + '{1})([\\s]*?)([^}])*\\}'
                  ),
                  ''
                );
              }
            });
          }
        });
      } else {
        queryGuestAnalysis({ id: this.entity.sjly.id }).then(res => {
          const { data } = res;
          if (this.codes !== null && this.codes.length > 0) {
            this.codes.forEach(item => {
              if (
                undefined !== data &&
                data !== null &&
                undefined !== data.data &&
                data.data !== null
              ) {
                this.html = this.html.replace(
                  new RegExp(
                    '\\$\\{([\\s]*?)(' + item.label + '{1})([\\s]*?)([^}])*\\}'
                  ),
                  data.data[0][item.code]
                );
              } else {
                this.html = this.html.replace(
                  new RegExp(
                    '\\$\\{([\\s]*?)(' + item.label + '{1})([\\s]*?)([^}])*\\}'
                  ),
                  ''
                );
              }
            });
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.count-body {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row nowrap;
}
.count-left {
  width: 80px;
  position: relative;
  border-left: 2px solid #e4e7ed;
}
.count-right {
  width: 290px;
  border-bottom: 1px dashed #e4e7ed;
}
.count-left-radius {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 13px;
  left: -6px;
  border-radius: 50%;
}
.count-left-radius-span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: vabDot 1.2s ease-in-out infinite;
}
.count-left-span {
  width: 100%;
  line-height: 30px;
  font-size: 13px;
  padding: 5px;
  box-sizing: border-box;
  color: #0a84ff;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  display: block;
}
@keyframes vabDot {
  0% {
    opacity: 0.6;
    transform: scale(0.8);
  }
  to {
    opacity: 0;
    transform: scale(2.4);
  }
}
</style>
